<template>
	<view class="uiwu" :style="{'background-image':`url(${uiwu.imgUrl}yuandian.png)`}">
		<!-- #ifndef MP-TOUTIAO -->
		<uiwu-tab-header headerIndex="2" />
		<!-- #endif -->
		<view class="uiwu-money uiwu-flex-space">
			<view class="money uiwu-flex-align">
				<image src="/static/jinbi.png" mode="widthFix"></image>
				<text>金币余额：{{userInfo.now_money}}</text>
			</view>
			<image @tap="uiwu.openWindow('/pages/recharge/record')" src="/static/jifenmingxing.png" mode="widthFix"
				style="width: 60rpx;"></image>
		</view>
		<view class="uiwu-border"></view>
		<view class="uiwu-list uiwu-flex">
			<view class="uiwu-list-item uiwu-flex-column uiwu-flex-center" v-for="(item,index) in listData" :key="index"
				@tap="chekedItem(item)">
				<view class="title">{{item.coin}}币</view>
				<image src="/static/rejinbi.png" mode="widthFix"></image>
				<view class="tips">充值{{item.coin}}币送{{item.give_coin}}币</view>
				<view class="btn">
					<text class="uiwu-flex-center">￥{{item.price}}</text>
					<text></text>
				</view>
			</view>
		</view>
		<uiwu-payment-model :items="itemInfo" v-if="showModel" v-model="showModel"></uiwu-payment-model>

	</view>
</template>

<script setup lang="ts">
	import { useStore } from 'vuex';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { inject, ref, toRef } from 'vue';
	import { rechargelist, userInfo as getUserInfofun, rechargeRecharge } from '@/api/api';
	const uiwu = inject<any>('uiwu');
	const showModel = ref<boolean>(false);
	const listData = ref<Array<object>>([])
	const store = inject<any>('store');
	const userInfo = toRef(store.state, 'userInfo')
	const itemInfo = ref({})
	const stores = useStore();
	const increment = (data, type) => {
		stores.commit(type, data);
	};
	const getUserInfo = async () => {
		const { data } = await getUserInfofun();
		increment(data, 'set_user')
	}
	const chekedItem = (item : object) => {
		itemInfo.value = item
		// #ifdef APP
		showModel.value = true
		// #endif
		// #ifdef MP-TOUTIAO
		ttPay(item)
		// #endif
	}
	/**
	 * 获取充值套餐列表
	 */
	const getrechargelist = async () : void => {
		const { data: { recharge_quota } } = await rechargelist();
		listData.value = recharge_quota
	}
	const ttPay = async (item) => {
		const { data: { data } } = await rechargeRecharge({
			recharge_id: item.id,
			coupon_user_id: 0,
			pay_type: 'douyin'
		})
		uni.requestPayment({
			orderInfo: {
				order_id: data.order_id,
				order_token: data.order_token
			},
			service: 5,
			success: (res) => {
				console.log(res);
				if (res.code === 0) {
					uiwu.toast('充值成功')
					getUserInfo()
				} else {
					uiwu.toast('充值失败')
				}
			},
			fail: (err) => {
				console.log(err);
			}
		})
	}
	onLoad(() => {
		getrechargelist()
	})
	onShow(() => {
		getUserInfo()
	})
</script>

<style lang="scss" scoped>
	.uiwu {
		background-repeat: no-repeat;
		background-position: 0 0;
		background-color: #FDD134;
		padding-bottom: 22rpx;
		background-size: 100% 100%;
		min-height: 100vh;
	}

	.uiwu-money {
		background-color: #272323;
		width: 100%;
		padding: 12rpx 20rpx;

		.money {
			flex: 1;
			height: 60rpx;
			border-radius: 30rpx;
			border: 3rpx solid #FCE5C7;
			padding: 0 20rpx;
			margin-right: 38rpx;

			image {
				width: 40rpx;
				margin-right: 12rpx;
			}

			text {
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}

	.uiwu-border {
		width: 100%;
		height: 6rpx;
		background: #EF821E;
	}

	.uiwu-list {
		flex-wrap: wrap;
		padding: 24rpx 24rpx 0;
		justify-content: space-between;

		&-item {
			width: 340rpx;
			height: 342rpx;
			background: url('../../static/rebg.png') no-repeat 0 0;
			background-size: 100% 100%;
			margin-bottom: 24rpx;
			justify-content: flex-start;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				line-height: 58rpx;
			}

			image {
				width: 178rpx;
				margin-top: 19rpx;
			}

			.tips {
				font-size: 24rpx;
				font-weight: 500;
				color: #FCE5C7;
				margin: 16rpx 0 18rpx;
			}

			.btn {
				width: 252rpx;
				position: relative;
				margin-bottom: 40rpx;

				text {
					width: 252rpx;
					height: 56rpx;
					border-radius: 28rpx;
					border: 3rpx solid #000000;
					position: absolute;
					font-size: 32rpx;
					font-weight: bold;
					color: #231815;

					&:nth-child(1) {
						background-color: #FAC500;
						z-index: 9;
						left: -2rpx;
						top: -4.5rpx;
					}

					&:nth-child(2) {
						left: 2rpx;
						top: 4.5rpx;
						background: linear-gradient(180deg, #8DC21F 0%, #5BB431 100%);
					}
				}
			}
		}
	}
</style>